<template>
  <div>
    <div class="base-page">
      <!-- 导航栏-->
      <PageHead>宠物详情</PageHead>
      <MyRow2>
        <!-- 左边div：宠物头像-->
        <div class="left-div">
          <img :src="'/api/common/download?name='+pet.petPhoto" alt="头像" class="my-avatar">
          <h3>{{ pet.petName }}</h3>
          <span>{{ getAge(pet.petAge) }}岁</span>
        </div>
        <template #right>
          <!-- 右边div，宠物信息-->
          <table class="myTable">
            <tr>
              <td class="bold">姓名</td>
              <td>{{ pet.petName }}</td>
            </tr>
            <tr>
              <td class="bold">品种</td>
              <td>{{ pet.petVariety }}</td>
            </tr>
            <tr>
              <td class="bold">性别</td>
              <td>{{ pet.petSex ? "公" : "母" }}</td>
            </tr>
            <tr>
              <td class="bold">出生日期</td>
              <td>{{ pet.petAge }}</td>
            </tr>
            <tr>
              <td class="bold">最近状况</td>
              <td>{{ pet.petInfo }}</td>
            </tr>
            <tr>
              <td class="bold">健康状况</td>
              <td>{{ pet.petStatus }}</td>
            </tr>
          </table>
          <el-button v-if="inAdopt===0 && pet.clientId==null" style="width: 50%" type="primary"
                     @click="dialogVisible = true">
            申请领养
          </el-button>
          <el-button v-else-if="pet.clientId==null" disabled style="width: 50%" type="info">
            审核中
          </el-button>
          <el-button style="width: 50%" type="success" @click="aaa">
            修改信息
          </el-button>
        </template>
      </MyRow2>
    </div>
    <el-dialog v-model="modalView" :title="宠物信息修改" draggable width="60%">
      <!--头像上传框-->
      <UpImg :photoNm="form.petPhoto" @upPhoto="changePhoto"/>
      <!--表单-->
      <el-form ref="myFormRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="宠物姓名" prop="petName">
          <el-input v-model="form.petName" clearable placeholder="宠物姓名"/>
        </el-form-item>
        <el-form-item label="宠物品种" prop="petVariety">
          <el-input v-model="form.petVariety" clearable placeholder="宠物品种"/>
        </el-form-item>
        <el-form-item label="宠物性别">
          <el-radio-group v-model="form.petSex">
            <el-radio :label="true" border>公</el-radio>
            <el-radio :label="false" border>母</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
              v-model="form.petAge"
              format="YYYY-MM-DD"
              placeholder="选择出生日期"
              type="date"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="健康状况">
          <el-input v-model="form.petStatus" clearable placeholder="健康状况"/>
        </el-form-item>
        <el-form-item label="宠物主人">
          <el-select v-model="form.clientId" filterable placeholder="选择用户">
            <el-option label="无" value=""/>
            <el-option v-for="c in clientNameL" :key="c.roleId" :label="c.roleName" :value="c.roleId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="宠物近况">
          <el-input v-model="form.petInfo" clearable placeholder="宠物近况"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="modalView = false">取消</el-button>
        <el-button type="primary" @click="formSubmit">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
    <!--弹出框-->
    <el-dialog v-model="dialogVisible" title="申请领养">
      <el-form :model="dialogAsk">
        <el-form-item label="申请理由" label-width="140px">
          <el-input v-model="dialogAsk.adoptInfo" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="预付押金" label-width="140px">
          <el-input-number
              v-model="dialogAsk.adoptMoney"
              :max="5000"
              :min="100"
              :step="100"
              controls-position="right"
          />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="adoptPet">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import PageHead from "@/components/row/PageHead.vue";
import {examplePet, Pet} from "@/model/entiy/Pet";
import {getAge} from "@/utils/TimeUtil";
import {onMounted, reactive, ref} from "vue";
import {PetAskOne} from "@/model/VO/PetAskOne";
import {reqPetOne} from "@/request/PetApi";
import {reqAdoptPet, reqInAdopt} from "@/request/AdoptApi";
import MyRow2 from "@/components/row/MyRow2.vue";
import {FormRules} from "element-plus";

// 如此获取传参
const props = defineProps<{
  petId: string
}>()
// 样例数据
const pet = ref<Pet>(examplePet())
// 是否领养
const inAdopt = ref<number>(0)
const modalView = ref(false)
const form = ref<Pet>(examplePet()) // 空的默认值
const aaa = () => {
  modalView.value = true
}
// 表单校验规则
const rules = reactive<FormRules>({
  "petName": [
    {required: true, message: '请给宠物起一个名字', trigger: 'blur'},
  ],
  "petVariety": [
    {required: true, message: '请输入宠物的品种', trigger: 'blur'},
  ],
})
const changePhoto = (val: string): void => {
  form.value.petPhoto = val
}
// 弹出框设置
const dialogVisible = ref(false)
const dialogAsk: PetAskOne = reactive({
  petId: parseInt(props.petId),
  adoptInfo: "",
  adoptMoney: 300
})
const adoptPet = () => {
  dialogVisible.value = false
  inAdopt.value = 1
  reqAdoptPet(dialogAsk)
}

onMounted(() => {
  reqPetOne(parseInt(props.petId)).then(res => {
    pet.value = res
  })
  reqInAdopt(parseInt(props.petId)).then(res => {
    inAdopt.value = res
  })
})
</script>

<style lang="scss" scoped>
/* 粉色基调样式 */
$primary-pink: #ffb6c1;
$secondary-pink: #ffc0cb;
$light-pink: #ffe4e1;
$dark-pink: #db7093;
$text-color: #5a3d3d;

/*设置大致布局*/
.base-page {
  position: absolute;
  top: 15vh;
  background-color: $light-pink;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.2);
  width: 50vw;
  left: 25vw;
  padding: 16px;
  border-radius: 12px;
  color: $text-color;

  @media (min-width: 576px) and (max-width: 768px) {
    width: 60vw;
    left: 20vw;
  }
  @media (max-width: 575px) {
    width: 80vw;
    left: 10vw;
  }

  img.my-avatar {
    border-radius: 50%;
    margin-top: 10px;
    width: 128px;
    height: 128px;
    border: 3px solid $primary-pink;
    box-shadow: 0 0 10px rgba(219, 112, 147, 0.3);
  }

  h3 {
    color: $dark-pink;
    margin-top: 10px;
  }

  span {
    color: $text-color;
    font-size: 14px;
  }
}

/*设置信息展示表格*/
.myTable {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;

  td {
    border: 1px solid $secondary-pink;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.8);
  }

  tr:first-child td {
    border-top: none;
  }

  tr:last-child td {
    border-bottom: none;
  }

  .bold {
    font-weight: bold;
    color: $dark-pink;
    background-color: rgba(255, 182, 193, 0.1);
  }
}

/* 按钮样式覆盖 */
.el-button {
  &.el-button--primary {
    background-color: $dark-pink;
    border-color: $dark-pink;

    &:hover {
      background-color: lighten($dark-pink, 5%);
      border-color: lighten($dark-pink, 5%);
    }
  }

  &.el-button--success {
    background-color: $primary-pink;
    border-color: $primary-pink;

    &:hover {
      background-color: lighten($primary-pink, 5%);
      border-color: lighten($primary-pink, 5%);
    }
  }

  &.el-button--info {
    background-color: $secondary-pink;
    border-color: $secondary-pink;
  }
}

/* 对话框样式 */
.el-dialog {
  border-radius: 12px;
  overflow: hidden;

  .el-dialog__header {
    background-color: $primary-pink;
    color: white;

    .el-dialog__title {
      color: white;
    }
  }

  .el-dialog__body {
    background-color: $light-pink;
  }

  .el-dialog__footer {
    background-color: $light-pink;
  }
}

/* 表单元素样式 */
.el-form-item__label {
  color: $dark-pink;
}

.el-input, .el-select, .el-date-editor {
  .el-input__inner {
    border-color: $secondary-pink;

    &:focus {
      border-color: $dark-pink;
    }
  }
}

.el-radio {
  &.is-bordered {
    border-color: $secondary-pink;

    &.is-checked {
      border-color: $dark-pink;

      .el-radio__label {
        color: $dark-pink;
      }
    }
  }
}
</style>
